<template>
  <div class="index_div_bg">
    <div class="home_box">
      <!--切换跳转-->
      <div class="home_header">
        <div class="display_sw">
          <div class="home_left">
            <span @click="touzhu1" :class="{bottom_border:isbottom}">我要投注</span>
            <span @click="touzhu2" :class="{bottom_border2:isbottom2,}">投注记录</span>
          </div>
          <p class="home_you_fz">余额：{{user_info.wallet}}
              <i class="icon_flush" @click="updateWallet"></i>
          </p>
        </div>
      </div>
      <!-- <kaijiang></kaijiang> -->
      <gameInfo @completeCount="completeCount"></gameInfo>
      <div class="home_count" v-if="qiehuan1">
        <ul class="wanfa_ul">
          <!--直选和值-->
          <li class="display_sw2">
            <span class="ba_red">直选和值</span>
            <wanfa @getActiveData="handlerwan" ref='wanfa'></wanfa>
          </li>
        </ul>
        <!-- mainFooter start -->
        <mainFooter
          :total_number="total_number"
          :total_price="total_price"
          :isClear="true"
          @addNumber="addNumber"
          @handlerBottom="handlerBottom"
          @handlerClear="handlerClear"
        />
        <!-- mainFooter end -->
        <!--下注弹出密码框-->
        <!--<van-dialog
          v-model="isShowPasswordDialog"
          title="温馨提示"
          show-cancel-button
          @cancel="passwordDialogClose"
          @confirm="passwordDialogConfirm"
        >
          <div class="jiaoyi_div">
            <p class="jiaoyi_tishi_p">是否确认下注，确认请输入交易密码</p>
            <input type="password" class="jiaoyi_input" v-model="deal_pwd" placeholder="请输入交易密码" />
          </div>
        </van-dialog>-->

        	<van-dialog v-model="isShowPasswordDialog" message="请确定下注" show-cancel-button @cancel="passwordDialogClose" @confirm="passwordDialogConfirm">
				</van-dialog>
      </div>
      <!--这是五星复式的 投注记录组件的内容-->
      <div class="touzhu_zujian" v-else>
         <touzhujilu></touzhujilu>
      </div>
    </div>
  </div>
</template>

<script>
import touzhujilu from "../wuxingwanfa/components/touzhujilu";
import wanfa from "../qiansanwanfa/components/wanfa";
import mainFooter from "../AComp/mainFooter";
import gameInfo from "../AComp/gameInfo";
import { laterThreeDirectSum } from "../../service/api";
import { mapState, mapGetters } from "vuex";
import { randomChip, getSumArrayTotalNum } from "../../util/utils";
import _isEmpty from "lodash/isEmpty";
import { Dialog } from "vant";
export default {
  components: {
    touzhujilu,
    mainFooter,
    gameInfo,
    wanfa
  },
  data() {
    return {
    	play_type:"12",//投注记录传值五星复式1
      active: 0,
      //我要投注跟投注记录切换
      qiehuan1: true, //我要投注跟投注记录切换显示
      isbottom: true, //我要投注添加class
      isbottom2: false, //投注记录添加class

      isShowPasswordDialog: false, //密码弹窗
      deal_pwd: "", //交易密码
      result: []
    };
  },
  computed: {
    total_number() {
      return getSumArrayTotalNum(this.result);
    },
    // 总价
    total_price() {
      let { total_number, amount_model_price, multiple } = this;
      return total_number * amount_model_price * multiple;
    },
    ...mapGetters(["amount_model_price", "amount_model_text"]),
    ...mapState(["user_info", "multiple", "amount_model", "current_play_type"])
  },

  methods: {
     updateWallet(){
      console.log("更新余额")
      this.$store.dispatch("asyncGetUserInfo");
    },
    completeCount(){
      this.handlerClear();
    },
    handlerClear(){
      this.$refs.wanfa.clear();
      this.result = []
    },
    //选值
    handlerwan(val) {
      this.result = val;
    },
    //立即下注
    handlerBottom() {
      let { total_number } = this;
      if (!total_number) {
        this.$toast("号码选择不完整, 请重新选择");
        return;
      }
      this.isShowPasswordDialog = true;
    },
    // 提交
    passwordDialogConfirm() {
      let {
        multiple,
        amount_model,
        total_number,
        total_price,
        deal_pwd,
        result
      } = this;
//    if (!deal_pwd) {
//      this.$toast("交易密码不能为空");
//      return;
//    }
      let params = {
//      deal_pwd,
        amount_model,
        multiple,
        number_string: result.join("|"),
        total_amount: total_price,
        total_num: total_number
      };
      laterThreeDirectSum(params).then(res => {
        this.$refs.wanfa.clear();
        if (res.data.status_code === 200) {
          this.$toast(res.data.message);
          this.$store.dispatch('asyncGetUserInfo');
          this.passwordDialogClose();
        }
      });
    },
    // 密码框关闭
    passwordDialogClose() {
      this.isShowPasswordDialog = false;
      this.deal_pwd = ''
    },
    //加注到号码篮
    addNumber() {
      let {
        multiple,
        current_play_type,
        amount_model,
        total_number,
        result
      } = this;
      if (!total_number) {
        this.$toast("号码选择不完整, 请重新选择");
        return;
      }
      let data = {
        num_str: result.join('|'),
        multiple,
        amount_model,
        playType: current_play_type,
        numbers: total_number
      };
      this.$store.commit("set_cart_list", data);
    },

    //我要投注
    touzhu1() {
      //this.$router.push("/wuxingfushi");
      this.qiehuan1 = true;
      this.isbottom = true;
      this.isbottom2 = false;
    },
    //投注记录
    touzhu2() {
      //this.$router.push("/fushijilu");
      this.qiehuan1 = false;
      this.isbottom2 = true;
      this.isbottom = false;
    }
  }
};
</script>

<style>
.jiaoyi_div {
  margin-top: 0.2rem;
}

.jiaoyi_input {
  width: 85%;
  margin: 0.5rem auto;
  display: block;
  border: 2px solid #f5f5f5;
  padding: 0.1rem 0.1rem;
  font-size: 0.3rem;
}

.jiaoyi_tishi_p {
  text-align: center;
  font-size: 0.25rem;
}
/*  */

.xuanze_xiazhu_ul .xuanze_xiazhu_li.red {
  background: #d21d17;
  color: #fff;
  border: none;
}

.xiazhu_chakan_ul .xiazhu_chakan_li .red {
  background: #d21d17;
  color: #fff;
  border: none;
}

.xiazhu_chakan_ul .xiazhu_chakan_li.active {
  background: #d21d17;
}
</style>
